<style lang="less">
    @import '../../../styles/common.less';
</style>
<template>
    <div>
        <Row >
            <Button type="success" @click="handleAdd" style="margin-bottom: 10px">添加</Button>
        </Row>
        <div class="edittable-table-height-con">
            <can-edit-table refs="tableTemplate" v-model="records" @on-delete="handleDelete"
                            @on-change="handleUpdate" @on-select="handleSelect"
                            :columns-list="columns" ></can-edit-table>
        </div>
        <Drawer title="新增字段" :closable="true" width="70" v-model="showAdd" :mask="false" >
            <TableColumn :formTemplateId="formTemplateId"></TableColumn>
        </Drawer>
    </div>

</template>
<script>
    import api  from '../../../libs/api';
    import {eventBus} from "../../../libs/eventBus";
    import canEditTable from '../../tables/components/canEditTable'
    import TableColumn from "./table_column"
    export default {
        name: 'table_template',
        components: {
            canEditTable,
            TableColumn
        },
        data() {
            return {
                records: [],
                formTemplateId:"",
                tableName:"",
                showAdd:false,
                precisionDecimalType:["decimal","double","float"], //需要小数位数的数据类型列表
                precisionExcludeType:["date","datetime","timestamp"], //时间类型不需要精度
                columns: [
                    {
                        title: '字段名',
                        key: 'columnName',
                        width: 150,
                        editable: false
                    },
                    {
                        title: '字段类型',
                        key: 'columnType',
                        width: 150,
                        type:"select",
                        option:{data:"columnTypeEnums",key:"name",value:"code"},
                        editable: true,

                    },
                    {
                        title: '字段长度',
                        key: 'columnPrecision',
                        width: 100,
                        editable: true
                    },
                    {
                        title: '小数点',
                        key: 'columnPrecisionDecimal',
                        width: 100,
                        editable: true
                    },
                    {
                        title: '字段描述',
                        width: 200,
                        key: 'columnComment',
                        editable: true
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        handle: ['edit', 'delete'],
                        buttonHiddenRowKey:['id','foreignId']    //不显示操作按钮的行key
                    }
                ]
            }
        },
        methods:{
            handleRead() {
                let self=this;
                if(self.formTemplateId!=""){
                    this.$get(api.tableTemplates.base+"/"+self.formTemplateId,{}).then(response=>{
                        self.records=(response.obj==null?[]:response.obj.columns);
                        self.tableName=(response.obj==null?"":response.obj.tableName);
                    });
                }

            },
            handleDelete (val, index) {
                delete val["columnTypeEnums"]; //删除枚举数据
                delete val["editting"]; //删除编辑数据
                delete val["edittingCell"]; //删除编辑数据
                this.$delete(api.tableTemplates.column.replace("{templateId}",this.formTemplateId),val);
            },
            handleUpdate (val, index) {
                delete val[index]["columnTypeEnums"]; //删除枚举数据
                this.$put(api.tableTemplates.column.replace("{templateId}",this.formTemplateId),val[index]);
            },
            handleSelect(vm,index,select){
                vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore));
                if(this.precisionDecimalType.indexOf(select)>-1){
                    vm.edittingStore[index].edittingCell["columnPrecisionDecimal"] = false;
                    vm.edittingStore[index].edittingCell["columnPrecision"] = false;
                }else if(this.precisionExcludeType.indexOf(select)>-1){
                    vm.$set(vm.thisTableData[index],"columnPrecision","");
                    vm.$set(vm.thisTableData[index],"columnPrecisionDecimal","");
                    vm.edittingStore[index].edittingCell["columnPrecision"] = true;
                    vm.edittingStore[index].edittingCell["columnPrecisionDecimal"] = true;
                }else{
                    vm.edittingStore[index].edittingCell["columnPrecisionDecimal"] = true;
                    vm.edittingStore[index].edittingCell["columnPrecision"] = false;
                }
            },
            handleAdd(){
                this.showAdd=true;
            }
        },
        mounted(){
            let self=this;
            eventBus.$on("setTableCompFormTemplateId",function (formTemplateId) {
                self.formTemplateId=formTemplateId;
                self.handleRead();
            });
            eventBus.$on("closeColumnDrawer",function () {
                self.showAdd=false;
            });
            eventBus.$on("freshTableMetaData",function () {
                self.handleRead();
            });
        },
    }
</script>